<template>
    <div class="x6-card">
        <RenderContent :render="renderData.render || render" :data="renderData"></RenderContent>
    </div>
</template>

<script>
import RenderContent from './RenderContent.js';
export default {
    inject: ['getGraph', 'getNode'],
    components: { RenderContent },
    mounted() {
        const self = this;
        const node = this.getNode();
        this.nodeInfo = node;
        this.graph = this.getGraph();
        // 监听数据改变事件
        this.renderData = node.store.data.data;
        node.on('change:data', ({ current }) => {
            let obj = { ...self.renderData };
            Object.keys(current).forEach(key => {
                obj[key] = current[key];
            });
            self.renderData = { ...obj };
        });
    },
    data() {
        return {
            renderData: {
                title: '',
                body: '',
                type: '',
            },
            graph: null,
            Node: {},
            nodeInfo: {},
            showChildren: true,
            render: (h, param) => h('div', {}, [h('span', '未知渲染'), h('div', '请传入Render函数')]),
        };
    },
    methods: {
        ToggleChild(cell) {
            this.ShowChildren(cell, this.showChildren);
            this.showChildren = !this.showChildren;
        },
        ShowChildren(cell, bool) {
            let childrenCells = cell.getChildren() || [];
            childrenCells.forEach(item => {
                bool ? item.hide() : item.show();
                if (item.getChildren()) {
                    this.ShowChildren(item, bool);
                }
            });
        },
        RemoveNode(cell) {
            // let x6Arr = this.graph.toJSON().cells;
            // if (this.level == 1 && x6Arr.length != 1) {
            //     return this.$YsMessage.info('请先删除其余指标');
            // }
            // this.UpdateX6(x6Arr);
            this.graph.removeNode(cell);
        },
        UpdateX6(x6Arr) {
            this.Node = this.CreateNode(x6Arr);
            let cells = [];
            x6Arr.forEach(item => {
                if (item.shape == 'edge') {
                    if (item.noTool) {
                        (item.vertices || []).forEach(po => {
                            po.x = this.Node[item.source.cell].sort * 300 - 280;
                            po.y = po.y;
                        });
                    }
                    let edge = this.graph.createEdge(item);
                    if (item.noTool) {
                        edge.removeTool('button');
                    }
                    cells.push(edge);
                } else {
                    if (item.shape == 'pro-node' || item.shape == 'start-node') {
                        // 找到vue节点删除component属性
                        delete item.component;
                    }
                    cells.push(this.graph.createNode(item));
                }
            });
            this.graph.resetCells(cells);
        },
        CreateNode(arr) {
            let obj = {};
            arr.forEach(item => {
                obj[item.id] = item;
            });
            return obj;
        },
        CreateEdge(source, target, obj) {
            // console.log(this.Node[source], this.Node[target]);
            let edge = {
                ...obj,
            };
            return edge;
        },
    },
};
</script>

<style lang="less">
.x6-card {
    width: 100%;
    height: 100%;
    background: #2f3e59;
    border-radius: 4px;
    // padding: 16px !important;
}
</style>
